<template>
  <div>
    <h1>我的页面</h1>
    <input type="button" value="去注册" @click="goReg" />
    <hr/>
    <p>store.state.count:{{$store.state.count}}</p>
    <p>store.state.age:{{$store.state.age}}</p>
    <p>是否成年:{{$store.getters.isAdult}}</p>
    <input type="button" value="长大" @click="addAge">
    
    <FooterBar></FooterBar>
  </div>
</template>
  
  <script>
import FooterBar from "@/components/FooterBar.vue";

export default {
    name:"My",
    components:{
      FooterBar
    },
    created(){
      console.log("My.created");
      console.log("My. this.$route",this.$route);
      console.log("My. this.$route.query",this.$route.query);
    },
    methods:{
      addAge(){
        // this.$store.state.age++; 不要直接修改state里的数据。
        // 提交mutation的方式修改state中的数据
        // this.$store.commit("mAddAge",2);//用commit执行mutation里的函数。

        // this.$store.commit("mAddAge",{
        //   inc:2
        // });

        // console.log("提交前this.$store.state.age",this.$store.state.age);
        // this.$store.commit({
        //   type:"mAddAge",//type属性是固定写法
        //   inc:2
        // })
        // console.log("提交后this.$store.state.age",this.$store.state.age);

        // 一次给age加多少，来自于后端，
        // 派发action，在aciton里发送请求
        this.$store.dispatch({
          type:"aAddAge"
        });

      },  
      goReg(){
        // this.$router：就是在根vue对象植入的那个vue-router对象
        // push方法：把跳转的路径放到页面栈里，记录页面跳转的历史，方便后期做后退的工作。
        // this.$router.push("/Reg");
        this.$router.push({path:"/Reg"});

        // replace方法：用跳转的路径，替换页面栈最上面的那个路径。
        // this.$router.replace("/Reg");
      }
    }

}
</script>

<style>

</style>